<template>
  <header-nav :collapse="collapse" :items="headerNavItems" @collapseChange="collapseChange"></header-nav>
  <sidebar :collapse="collapse" :items="sidebarItems"></sidebar>
  <div class="content-box" :class="{ 'content-collapse': collapse }">
    <div class="content">
      <router-view />
    </div>
  </div>
</template>

<script>
import Sidebar from "./Sidebar.vue";
import HeaderNav from "./HeaderNav.vue";

export default {
  name: "HeaderSidebarSkeleton",
  components: {HeaderNav, Sidebar},
  props: {
    headerNavItems: {
      type: Array,
      default: [],
    },
    sidebarItems: {
      type: Array,
      default: [],
    }
  },
  data() {
    return {
      collapse: false,
    }
  },
  methods: {
    collapseChange() {
      this.collapse = !this.collapse;
    }
  }
}
</script>

<style scoped>

</style>